<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: zhr
 * @LastEditTime: 2022-01-08 14:32:55
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom1_container" id="container" style="height: 95%"></div>
</template>

<script>
import {DualAxes} from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[ 
  { year: '8:00', meal: 154 ,femeal:100},
  { year: '9:00', meal: 350,femeal:200 },
  { year: '10:00', meal: 610,femeal:400},
  { year: '11:00', meal: 245,femeal:50},
  { year: '12:00', meal: 480,femeal:350},
  { year: '13:00', meal: 100,femeal:200},
  { year: '14:00', meal: 380,femeal:150}
    ]
     }
  },
created(){
  
},
mounted(){
this.initChart()
},
methods:{
initChart(){
  const dualAxes = new DualAxes(this.$refs.bottom1_container,{
    data:[this.dataArr,this.dataArr],
    xField:'year',
    yField:['meal','femeal'],
    geometryOptions:[{
      geometry:'line',
      color:'#5B8FF9',
    },
    {
      geometry:'line',
      color:'#5AD8A6',
    }
    ]
  })

  dualAxes.render();
}
}
}
</script>

<style scoped>

</style>